import logo from './avatar.png';
import './App.scss';
import { Empty, Input, Table,Tooltip } from 'antd';
import 'antd/dist/antd.css';
import $ from "jquery";
import {useState} from 'react';
import axios from 'axios';
const {Search} = Input;
var columns = [
    {
      title: '类型',
      dataIndex: 'type',
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: type => (
        <Tooltip placement="topLeft" title={type}>
          {type}
        </Tooltip>
      )
    },
    {
      title: '学院',
      dataIndex: 'college',
      width: 175,
      ellipsis: {
        showTitle: false,
      },
      render: college => (
        <Tooltip placement="topLeft" title={college}>
          {college}
        </Tooltip>
      )
    },
    {
      title: '作品名称',
      dataIndex: 'workName',
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: workName => (
        <Tooltip placement="topLeft" title={workName}>
          {workName}
        </Tooltip>
      )
    },
    {
      title: '作品类型',
      dataIndex: 'workType',
      width: 150,
      ellipsis: {
        showTitle: false,
      },
      render: workType => (
        <Tooltip placement="topLeft" title={workType}>
          {workType}
        </Tooltip>
      )
    },
    {
      title: '负责人',
      dataIndex: 'leader',
      width: 100,
      ellipsis: {
        showTitle: false,
      },
      render: leader => (
        <Tooltip placement="topLeft" title={leader}>
          {leader}
        </Tooltip>
      )
    },
    {
      title: '成员',
      dataIndex: 'members',
      width: 250,
      ellipsis: {
        showTitle: false,
      },
      render: members => (
        <Tooltip placement="topLeft" title={members}>
          {members}
        </Tooltip>
      )
    },
    {
      title: '奖项',
      dataIndex: 'prize',
      width: 150,
      ellipsis: {
        showTitle: false,
      },
      render: prize => (
        <Tooltip placement="topLeft" title={prize}>
          {prize}
        </Tooltip>
      )
    },
    {
      title: '指导老师',
      dataIndex: 'teacher',
      ellipsis: {
        showTitle: false,
      },
      width: 100,
      render: teacher => (
        <Tooltip placement="topLeft" title={teacher}>
          {teacher}
        </Tooltip>
      )
    },
    {
      title: '团队名称',
      dataIndex: 'teamName',
      width: 150,
      ellipsis: {
        showTitle: false,
      },
      render: teamName => (
        <Tooltip placement="topLeft" title={teamName}>
          {teamName}
        </Tooltip>
      )
    }
];
var tipsData=[];
function onSearch(value) {
  return axios.get('/data',{
    params:{
        type: '0',
        value: value
    }
  });
};
var index=0;

document.onkeydown=function(event){
              var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 27) {
                $("#searchList")[0].style.visibility="hidden";
            }
}

const select = event => {
  $("#searchList")[0].style.visibility="hidden";
};
const getInput = event => {
  //console.log(event.nativeEvent.target.id);
  if($("#t0")[0].innerText!=Empty){
    $("#searchList")[0].style.visibility="visible";
  }
  
};
$(function(){
  
  $("#searchbox")[0].onkeydown=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 13) {
    }
  }
  var hide = function(){
    $("#searchList")[0].style.visibility="hidden";
  }
  hide();
  $("#back")[0].addEventListener('click',function(){
    hide();
  })
  $("#container")[0].addEventListener('click',function(){
    hide();
  })
})
function App(){
  const [data, setData] = useState([]);
  function selectAOP(event) {
    axios.get('/data',{
      params: {
        type: '0',
        value: (event.nativeEvent.target.innerHTML)
      }}).then((message)=>{
        setData(message.data);
      });
      select();
}
var lastData;
function sendTipRequest(){
  if(lastData!=$("#searchbox")[0].getAttribute("value")){
    axios.get('/data',{
      params: {
        type: '1',
        value: $("#searchbox")[0].getAttribute("value")
      }}).then((message)=>{
        console.log(message.data);
        for(var key in message.data){
            $("#"+key)[0].innerText=message.data[key];
          }
      });
      lastData=$("#searchbox")[0].getAttribute("value")
  }

}
setInterval(sendTipRequest,1000);//一秒钟发送一次搜索联想请求
  //setData([]);
    return <div id="container" >
      <a id="tags" href="https://gitee.com/huuuuugh/search-competition/" target="blank">Gitee</a>
      <div id="space"/>
      <div id="back">
        <img src={logo}></img>
          <div id="searchTable">
            <Search
              placeholder="在此键入 姓名 / 作品名 / 指导老师 / 小组名 / 队员名 / 比赛类型 "
              enterButton=" 搜  索 "
              size="large"
              id='searchbox'
              onClick={getInput}
              onSearch={(value)=>{
                onSearch(value).then((response)=>{  
                  setData(response.data);
                });
                }
              }
            />

            <ul id="searchList" >
                <li className="tips" id="t0" onClick={selectAOP}></li>
                <li className="tips" id="t1" onClick={selectAOP}></li>
                <li className="tips" id="t2" onClick={selectAOP}></li>
                <li className="tips" id="t3" onClick={selectAOP}></li>
                <li className="tips" id="t4" onClick={selectAOP}></li>
                <li className="tips" id="t5" onClick={selectAOP}></li>
                <li className="tips" id="t6" onClick={selectAOP}></li>
                <li className="tips" id="t7" onClick={selectAOP}></li>
                <li className="tips" id="t8" onClick={selectAOP}></li>
                <li className="tips" id="t9" onClick={selectAOP}></li>
            </ul>
          </div>
          <Table id="table" columns={columns} dataSource={data} id="table"/>
      </div>

    </div>
}

export default App;